<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/echarts.min.js"></script>
		
	</head>
	<body>
		
		<div id="echarttest" style="border:2px  solid  red;height:600px;width:1200px;" ></div>
		    <!-- ECharts单文件引入 -->
	
		
		
	</body>
	
	
	<script type="text/javascript">
	var chartDom = document.getElementById('echarttest');
	var myChart = echarts.init(chartDom);
	var option;
	
	option = {
	  title: {
	    text: 'Temperature Change in the Coming Week'
	  },
	  tooltip: {
	    trigger: 'axis'
	  },
	  legend: {},
	  toolbox: {
	    show: true,
	    feature: {
	      dataZoom: {
	        yAxisIndex: 'none'
	      },
	      dataView: { readOnly: false },
	      magicType: { type: ['line', 'bar'] },
	      restore: {},
	      saveAsImage: {}
	    }
	  },
	  xAxis: {
	    type: 'category',
	    boundaryGap: false,
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value',
	    axisLabel: {
	      formatter: '{value} °C'
	    }
	  },
	  series: [
	    {
	      name: 'Highest',
	      type: 'line',
	      data: [10, 11, 13, 11, 12, 12, 9],
	      markPoint: {
	        data: [
	          { type: 'max', name: 'Max' },
	          { type: 'min', name: 'Min' }
	        ]
	      },
	      markLine: {
	        data: [{ type: 'average', name: 'Avg' }]
	      }
	    },
	    {
	      name: 'Lowest',
	      type: 'line',
	      data: [1, -2, 2, 5, 3, 2, 0],
	      markPoint: {
	        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
	      },
	      markLine: {
	        data: [
	          { type: 'average', name: 'Avg' },
	          [
	            {
	              symbol: 'none',
	              x: '90%',
	              yAxis: 'max'
	            },
	            {
	              symbol: 'circle',
	              label: {
	                position: 'start',
	                formatter: 'Max'
	              },
	              type: 'max',
	              name: '最高点'
	            }
	          ]
	        ]
	      }
	    }
	  ]
	};
	
	option && myChart.setOption(option);

	
	</script>
</html>
